<template>
    <div class="edit-cell" @click="editCell(1)">
        <el-form-item :prop="prop" :show-message="false" :rules="rules">
            <span class="text-ellipsis line" :title="v" v-show="!edit">{{
                v
            }}</span>
            <div v-show="edit">
                <!-- 输入框模式 -->
                <el-input
                    v-if="this.inputType === 'text'"
                    v-model="v"
                    ref="cellInput"
                    @blur="blurInput"
                />

                <!-- 数字输入框 -->
                <el-input-number
                    v-else-if="this.inputType === 'number'"
                    v-model="v"
                    ref="cellInput"
                    :controls="false"
                    @blur="blurInput"
                />

                <el-date-picker
                    v-else-if="this.inputType === 'date'"
                    v-model="v"
                    ref="cellInput"
                    value-format="yyyy-MM-dd"
                    @blur="blurInput"
                />

                <!-- 下拉选择模式 -->
                <!-- 
                    考虑到存在option中label和value值一致的情况，
                    故不存在selectValue时option的value的值为 selectLabel
                -->
                <el-select
                    v-else
                    v-model="v"
                    ref="cellInput"
                    filterable
                    @change="blurInput"
                >
                    <el-option label="请选择" value="" />
                    <el-option
                        v-for="v in select"
                        :key="v[selectValue]"
                        :label="v[selectLabel]"
                        :value="v[selectValue] || v[selectLabel]"
                    />
                </el-select>
            </div>
        </el-form-item>
    </div>
</template>

<script>
export default {
    props: {
        value: "",
        select: false,
        selectValue: "",
        selectLabel: "",
        params: {
            page: 1,
            rows: 500,
        },
        inputType: {
            default: "text",
        },
        decimal: 0,
        disabled: false,
        prop: "",
        rules: "",
    },
    data: () => {
        return {
            v: "",
            edit: 0,
        };
    },
    watch: {
        v(v) {
            let _v = this.checkValue(v);
            this.$emit("input", _v);
        },
        value(v) {
            this.v = this.checkValue(v);
        },
    },
    created() {
        this.v = this.checkValue(this.value);
    },
    methods: {
        blurInput(v) {
            this.editCell(0);
            this.$emit("change");
        },
        editCell(edit = false) {
            if (this.disabled) return false;
            this.edit = edit;
            edit &&
                this.$nextTick(() => {
                    let { cellInput } = this.$refs;
                    cellInput.focus();
                    cellInput.select && cellInput.select();
                });
        },
        checkValue(v) {
            let { inputType, decimal } = this;
            if (inputType === "number") {
                v = Number(v).toFixed(decimal);
                v = Number(v) || 0;
            }
            return v;
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.edit-cell {
    min-height: 23px;
    font-size: 12px;

    .el-input-number--medium {
        width: inherit;
        line-height: inherit;
    }

    .el-form-item {
        margin: 0 !important;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;

        input {
            text-align: center;
            font-size: 12px;
        }
    }

    span,
    .el-input--medium,
    .el-input-number--medium {
        font-size: 12px;
    }
}
</style>